<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<style>
     .tbody .row{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            /* width: 100%; */
            line-height: 40px;
        }
</style>
<body>
    <div id="container">
        <header>
            <h1>蜗牛学院学生管理系统</h1>
        </header>
        <main>
            <aside>
                <dl>
                    <dt>学生管理</dt>
                    <dd><a href="#/studentsAdd">新增学生</a></dd>
                    <dd><a href="#/studentsList">学生列表</a></dd>
                </dl>
                <dl>
                    <dt>班级管理</dt>
                    <dd><a href="#/classesAdd">新增班级</a></dd>
                    <dd><a href="#/classesList">班级列表</a></dd>
                </dl>
                <dl>
                    <dt>班主任管理</dt>
                    <dd><a href="#/headTeachersAdd">新增班主任</a></dd>
                    <dd><a href="#/headTeachersList">班主任列表</a></dd>
                </dl>
                <dl>
                    <dt>教师管理</dt>
                    <dd><a href="#/teachersAdd">新增教师</a></dd>
                    <dd><a href="#/teachersList">教师列表</a></dd>
                </dl>
                <dl>
                    <dt>专业管理</dt>
                    <dd><a href="#/projectsAdd">新增专业</a></dd>
                    <dd><a href="#/projectsList">专业列表</a></dd>
                </dl>
                <dl>
                    <dt>排课管理</dt>
                    <dd><a href="#/schedulesAdd">新增排课</a></dd>
                    <dd><a href="#/schedulesList">排课列表</a></dd>
                </dl>
            </aside>
            <section>
                <!-- 学生列表 -->
                <div class="section-content" id="studentsList">
                    <h2>学生信息</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>学生数据</h3>
                            <div>
                                <div class="content-row">
                                    <div class="search-frame">
                                        <select style="width: 60px;">
                                            <option value="name">姓名</option>
                                            <option value="age">年龄</option>
                                            <option value="gender">性别</option>
                                        </select>
                                        <input type="text">
                                    </div>
                                </div>

                                <table>
                                    <thead>
                                        <tr>
                                            <th>学生编号</th>
                                            <th>学生姓名</th>
                                            <th>学生年龄</th>
                                            <th>学生性别</th>             
                                            <th>学生班级</th>
                                            <th>学生专业</th>
                                            <th>学生头像</th>
                                          
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="studentsTb">
                                    </tbody>
                                </table>
                                <div class="content-row" style="display: flex;justify-content: space-between;">
                                    <p>每页
                                        <select id="pageSize">
                                            <option value="3">3</option>
                                            <option value="5">5</option>
                                            <option value="7">7</option>
                                            <option value="10">10</option>
                                        </select>
                                        条数据。显示第 1 条到第 5 条数据，共计 30 条数据。
                                    </p>
                                    <span>第<strong id="currentPage">1</strong>/<strong id="pages">1</strong></span>页</span>
                                </div>
                                <div class="content-row" style="text-align: center;">
                                    <button>首页</button>
                                    <button id="prevPage">上一页</button>
                                    <button id="nextPage">下一页</button>
                                    <button id="lastPage">尾页</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 新增学生 -->
                <div class="section-content form-content" id="studentsAdd">
                    <h2>新增学生</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>新增数据</h3>
                            <div>
                                <div>
                                    <div class="content-row">
                                        <label>学生姓名：</label>
                                        <input class="form-input" type="text" id="addStudentsName">
                                    </div>
                                    <div class="content-row">
                                        <label>学生年龄：</label>
                                        <input class="form-input" type="text" id="addStudentsAge">
                                    </div>
                                    <div class="content-row">
                                        <label>
                                            学生性别：
                                        </label>
                                        <label style="margin-right: 30px;">
                                            <input type="radio" name="addStudentsGender" value="男">
                                            男
                                        </label>
                                        <label>
                                            <input type="radio" name="addStudentsGender" value="女">
                                            女
                                        </label>
                                    </div>
                                    <div class="content-row">
                                        <label>学生专业：</label>
                                        <select class="form-input" id="studentsSubject">
                                            <!-- <option value="">前端</option>
                                            <option value="">Java</option>
                                            <option value="">UI设计</option> -->
                                        </select>
                                    </div>
                                    <div class="content-row">
                                        <label>学生班级：</label>
                                        <select class="form-input" id="ban1">
                                            <!-- <option value="">WEB01</option>
                                            <option value="">WEB02</option>
                                            <option value="">WEB03</option> -->
                                        </select>
                                    </div>
                                    <div class="content-row">
                                        <label>上传照片：</label>
                                        <input type="file">
                                    </div>
                                    <div class="content-row" style="margin-top: 50px;">
                                        <label></label>
                                        <button class="blue" id="addStudentsBtn">确认新增</button>
                                    </div>
                                </div>
                                <!-- 照片预览区域 -->
                                <div class="right-info">
                                    <div class="image-frame">
                                        <imgalt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 修改学生 -->
                <div class="section-content form-content" id="studentsUpdate">
                    <h2>修改学生</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>修改数据</h3>
                            <div>
                                <div>
                                    <div class="content-row">
                                        <label>学生姓名：</label>
                                        <input class="form-input" type="text">
                                    </div>
                                    <div class="content-row">
                                        <label>学生年龄：</label>
                                        <input class="form-input" type="text">
                                    </div>
                                    <div class="content-row">
                                        <label>
                                            学生性别：
                                        </label>
                                        <label style="margin-right: 30px;">
                                            <input type="radio" name="addStudentsGender">
                                            男
                                        </label>
                                        <label>
                                            <input type="radio" name="addStudentsGender">
                                            女
                                        </label>
                                    </div>
                                    <div class="content-row">
                                        <label>学生班级：</label>
                                        <select class="form-input">
                                            <option value="">WEB01</option>
                                            <option value="">WEB02</option>
                                            <option value="">WEB03</option>
                                        </select>
                                    </div>
                                    <div class="content-row">
                                        <label>上传照片：</label>
                                        <input type="file">
                                    </div>
                                    <div class="content-row" style="margin-top: 50px;">
                                        <label></label>
                                        <button class="blue">确认修改</button>
                                    </div>
                                </div>
                                <!-- 照片预览区域 -->
                                <div class="right-info">
                                    <div class="image-frame">
                                        <imgalt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 新增班级 -->
                <div class="section-content form-content" id="classesAdd">
                    <h2>新增班级</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>新增数据</h3>
                            <div>
                                <div>
                                    <div class="content-row">
                                        <label>班级名称：</label>
                                        <input class="form-input" type="text" id="subjectsId">
                                    </div>
                                    <div class="content-row">
                                        <label>选择专业：</label>
                                        <select id="selectHeadTeacher"></select>
                                    </div>

                                    <div class="content-row" style="margin-top: 50px;">
                                        <label></label>
                                        <button class="blue" id="addClassesBtn">确认新增</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 班级列表 -->
                <div class="section-content" id="classesList">
                    <h2>班级信息</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>班级数据</h3>
                            <div>
                                <table>
                                    <thead>
                                        <tr>
                                            <th>班级编号</th>
                                            <th>专业名称</th>
                                            <th>班级名称</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="classesTb">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 新增班主任 -->
                <div class="section-content form-content" id="headTeachersAdd">
                    <h2>新增班主任</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>新增数据</h3>
                            <div>
                                <div>
                                    <div class="content-row">
                                        <label>班主任名称：</label>
                                        <input class="form-input" type="text" id="addHeadTeachersName">
                                    </div>
                                    <div class="content-row">
                                        <label>班主任年龄：</label>
                                        <input class="form-input" type="text" id="addHeadTeachersAge">
                                    </div>
                                    <div class="content-row">
                                        <label>班主任性别：</label>
                                        <input class="form-input" type="text" id="addHeadTeachersGender">
                                    </div>
                                    <div class="content-row">
                                        <label>联系电话：</label>
                                        <input class="form-input" type="text" id="addHeadTeachersPhone">
                                    </div>
                                    <div class="content-row" style="margin-top: 50px;">
                                        <label></label>
                                        <button class="blue" id="addHeadTeachersBtn">确认新增</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 班主任列表 -->
                <div class="section-content" id="headTeachersList">
                    <h2>班主任信息</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>班主任数据</h3>
                            <div>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- 新增教师 -->
                <div class="section-content form-content" id="teachersAdd">
                    <h2>新增教师</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>新增数据</h3>
                            <div>
                                <div>
                                    <div class="content-row">
                                        <label>教师名称：</label>
                                        <input class="form-input" type="text">
                                    </div>
                                    <div class="content-row">
                                        <label>选择专业：</label>
                                        <select id="">
                                            <option value=""></option>
                                        </select>
                                    </div>
                                    <div class="content-row" style="margin-top: 50px;">
                                        <label></label>
                                        <button class="blue">确认新增</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 教师列表 -->
                <div class="section-content" id="teachersList">
                    <h2>教师信息</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>教师数据</h3>
                            <div>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- 新增专业 -->
                <div class="section-content form-content" id="projectsAdd">
                    <h2>新增专业</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>新增数据</h3>
                            <div>
                                <div>
                                    <div class="content-row">
                                        <label>专业名称：</label>
                                        <input class="form-input" type="text" id="addProjectsName">
                                    </div>
                                    <div class="content-row" style="margin-top: 50px;">
                                        <label></label>
                                        <button class="blue" id="addProjectsBtn">确认新增</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 专业列表 -->
                <div class="section-content" id="projectsList">
                    <h2>专业信息</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>专业数据</h3>
                            <div class="tbody">

                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <script src='./js/jquery.js'></script>
    <!-- 左侧菜单点击事件 -->
    <script src="./js/sidebar.js"></script>
    <script src="./js/students.js"></script>
    <script src="./js/subjects.js"></script>
    <script src='./js/classes.js'></script>
</body>

</html>